<template>
	<NavBarVue title="消息" />
	<!-- 消息 公告 -->
	<view class="bulletin">
		<view class="title-list" style="padding-top: 40rpx;">
			<view class="title-list-item" v-for="(item) in titlelist" :key="item.id"
				:class="navIndex==item.id?'active':''" @click="tab(item.id)">
				{{item.name}}
				<view class="square"></view>
				<view class="redcir"></view>
			</view>
		</view>
		<!-- 公告 -->
		<view class="content" v-if="navIndex==2">
			<view class="notify announcement">
				<view style="font-weight: 600; font-size: 28rpx;">送你一份调研问卷</view>
				<view class="bullrig">
					<view style="width: 90rpx; height: 90rpx;overflow: hidden;background-color: #FE5C71;display: flex;align-items: center;justify-content: center;border-radius: 50%;">
						<up-icon name="volume" size="28" color="#fff"></up-icon>
					</view>
					<view style="margin-left: 15rpx;font-size: 24rpx;color: #999;">
						诚邀您参与小调研,有机会领取300优惠券
					</view>
				</view>
			</view>
		</view>
		<!-- 互动 -->
		<view class="content" v-if="navIndex==0">
			<view class="notify" v-for="(item) in initMsgData.selectUserData" :key="item.id">
				<view style="display: flex;align-items: center;">
					<view style="width: 90rpx; height: 90rpx;overflow: hidden;background-color: #FE5C71;display: flex;align-items: center;justify-content: center;border-radius: 50%;">
						<up-icon name="thumb-up" size="28" color="#fff" v-if="item.msgTitle.includes('点赞')"></up-icon>
						<up-icon name="star" size="28" color="#fff" v-else-if="item.msgTitle.includes('收藏')"></up-icon>
						<up-icon name="bell" size="28" color="#fff" v-else></up-icon>
					</view>
					<view style="margin-left:15rpx;font-size: 24rpx;color: #999;flex:1;overflow: hidden">
						<view style="font-size:28rpx; font-weight:600;">{{item.msgTitle}}</view>
						<view style="font-size:24rpx; color:#999;margin-top: 10rpx;">{{item.content}}</view>
					</view>
				</view>
				<view style="position: relative;overflow: hidden;">
					<view style="font-size:20rpx; color:#ccc;white-space: nowrap;">{{showDate(item)}}</view>
				</view>
			</view>
		</view>
		<!-- 活动 -->
		<view class="content" v-if="navIndex==1">
			<view class="notify" @click.stop="tonotification">
				<view style="display: flex;align-items: center;">
					<view style="width: 90rpx; height: 90rpx;background-color: #FE5C71;display: flex;align-items: center;justify-content: center;border-radius: 50%;">
						<up-icon name="bell" size="28" color="#fff"></up-icon>
					</view>
					<view style="margin-left:15rpx;font-size: 24rpx;color: #999;">
						<view style="font-size:28rpx; font-weight:600;">消息通知</view>
						<view style="font-size:24rpx; color:#999;margin-top: 10rpx;">点击查看最新活动</view>
					</view>
				</view>
				<view style="position: relative;">
					<view style="font-size:20rpx; color:#ccc;">{{'15分钟前'}}</view>
					<view class="bubble">{{initMsgData.selectUserData.length}}</view>
				</view>
			</view>
		</view>
	</view>
	<TabBarVue type="message" />
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		computed
	} from 'vue';
	import TabBarVue from '../../components/TabBar.vue';
	import NavBarVue from '../../components/NavBar.vue';
	import {
		useMessageStore,
		useShopStore,
		useUserStore
	} from '../../store' //获取用户消息
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {formatActivityDate} from '@/utils/formatDate'
	
	const {
		selectUserMessage,
		initMsgData
	} = useMessageStore()
	
	// const {shopLocation} = useShopStore()
	const navIndex = ref(2)
	//标题数据
	const titlelist = reactive([{
			id: 2,
			name: "公告"
		},
		{
			id: 0,
			name: "互动"
		},
		{
			id: 1,
			name: "活动"
		}
	])
	

	//切换-----------------
	const tab = async (index) => {
		//记得写value
		navIndex.value = index
		await selectUserMessage({
			userId: userStore.userInfo.userInfos.id,
			type: navIndex.value
		});
	}
	
	const userStore = useUserStore()
	const userId = ref(null)
	// 渲染用的数据
	onShow(async () => {
		await userStore.getUserDetail()
		await selectUserMessage({
			userId: userStore.userInfo.userInfos.id,
			type: navIndex.value
		});
	})
	
	let showDate = formatActivityDate()
	
	const tonotification = () => {
		console.log(initMsgData, "tonotification");
		if(initMsgData.selectUserData.length) {
			uni.navigateTo({
				url: '/pages/tab-message/activity/show-infomation'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.bulletin {
		width: 100vw;
		height: 100vh;
		background: #f6f6f6;
	}

	.title-list {
		width: 100vw;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		font-size: 28rpx;
		padding: 0rpx 40rpx;
		color: #666;
		z-index: 100;
		.title-list-item {
			width: auto;
			height: 40rpx;
			line-height: 40rpx;
			margin-right: 40rpx;
			position: relative;
		}
	}

	.active {
		color: #333;
		font-size: 36rpx;
		font-weight: 600;

		.square {
			width: 18rpx;
			height: 8rpx;
			border-radius: 4rpx;
			position: absolute;
			left: 30rpx;
			bottom: -15rpx;
			background: #333;
		}

		.redcir {
			width: 12rpx;
			height: 12rpx;
			background: #fe556b;
			border-radius: 6rpx;
			position: absolute;
			right: -15rpx;
			top: 0rpx;
		}
	}

	.conbull {
		width: 100%;
		background: #fff;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.bullrig {
		width: 100%;
		display: flex;
		align-items: center;
		// justify-content: space-between;
	}
	.bullnr {
		display: flex;
		font-size: 24rpx;
		color: #999;
	}
	.content {
		width: 100vw;
		box-sizing: border-box;
		padding: 0 14rpx;
		//通知
		.notify {
			color: #555;
			height: auto;
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin: 0 auto;
			border-radius: 10rpx;
			background: #fff;
			margin-top: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			position: relative;
		}
		.announcement {
			flex-direction: column;
		}
	}
	.bubble {
		position: absolute;
		top: 40rpx;
		right: 3rpx;
		font-size: 20rpx;
		padding: 0rpx 8rpx;
		border-radius: 30rpx;
		font-weight: normal !important;
		color: white;
		background-color: rgb(255, 84, 106);
		height: 26rpx;
		line-height: 26rpx;
	}
</style>